<template>
    <div></div>
</template>

<script>
import { getList } from '@/api/table'
export default {
    data() {
        return{
          list: null,
          getList: [],
          arr:[],
          dayNumber: 0,
          listLoading: true,
          dialogTableVisible: false,
          tableData: [{
                date: 'FP',
                level: 'Good',
                name: "渲染出第一个像素点",
                time: '30.599999994039536',
                h1:"60",
            }, {
                date: 'FCP',
                level: 'Good',
                name: "渲染出第一个内容",
                time: '33.489669984039536',
                h1:"60",
            }, {
                date: 'LCP',
                level: 'Good',
                name: "最大内容渲染时间",
                time: '17.899',
                h1:"60",
            }, {
                date: 'FID',
                level: 'Good',
                name: "用户和页面进行首次交互操作",
                time: '16.9000000059604645',
                h1:"60",
            }, {
                date: 'CLS',
                level: 'Good',
                name: "累计布局位移",
                time: '0.00144590283945624',
                h1:"60",
            }, {
                date: 'DomReady',
                level: 'Good',
                name: "页面加载后执行js的时间",
                time: '40',
                h1:"60",
            }, {
                date: 'parseDNS',
                level: 'Good',
                name: "DNS域名解析",
                time: '0',
                h1:"60",
            }]
        }
    },
    created() {
      this.fetchData()
      this.apiarrcge()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        getList().then(response => {
          this.list = response.data.items
          this.listLoading = false
        })
      },
      apiarrcge() {
        this.$api.Logs.getTiming(1).then((res)=>{
        this.tableData[0].time = res.data.data[0].FP;
        this.arr[0]=(Math.trunc((1 - this.tableData[0].time/2500)*100));
        this.tableData[1].time = res.data.data[0].FCP;
        this.arr[1]=(Math.trunc((1 - this.tableData[1].time/3000)*100));
        this.arr[2]=(Math.trunc((1 - this.tableData[2].time/4000)*100));
        this.arr[3]=(Math.trunc((1 - this.tableData[3].time/300)*100));
        this.arr[4]=(Math.trunc((1 - this.tableData[4].time/0.25)*100));
        this.tableData[5].time = res.data.data[0].DomReady;
        this.tableData[6].time = res.data.data[0].parseDNS;
        this.url = res.data.data[0].url;
        this.riqi = res.data.data[0].timestamp;
        this.llq = res.data.data[0].userAgent;
        this.mounted()
        })  
        var i=0;
            this.tableData.forEach(e => {
            if (i == 0){
                this.arr.push(Math.trunc((1 - e.time/2500)*100));
                console.log(this.arr)
            }else if(i == 1){
                this.arr.push(Math.trunc((1 - e.time/3000)*100));
            }else if(i == 2){
                    this.arr.push(Math.trunc((1 - e.time/4000)*100));
            }else if (i == 3){
                this.arr.push(Math.trunc((1 - e.time/300)*100));
            }else if (i == 4){
                this.arr.push(Math.trunc((1 - e.time/0.25)*100));
            }
            i++;

            })
      },
    mounted() {
    //资源性能(ms)
    var myChart = this.$echarts.init(document.getElementById('right_trend'))
    var option = {
      title: {
        text: '资源性能'
      },
    backgroundColor:'#FFF',
    tooltip: {
        show:true
    },
    radar: {
        radius: '60%',
        center: ['32%', '50%'],
        // startAngle: 0,
        splitNumber: 10,
        nameGap: '10',
        name: {
            textStyle: {
                color: '#646464',
            }
        },
        axisLine: {
            lineStyle: {
                color: '#076CFF'
            }
        },
        splitLine: {
            lineStyle: {
                width: 0,
            }
        },
        splitArea: {
            areaStyle: {
                color: [ 'rgb(125,200,242)', 'rgb(137,205,244)','rgb(143,210,246)','rgb(155,216,248)','rgb(167,220,250)','rgb(186,227,252)' ,'rgb(200,230,253)','rgb(216,235,254)','rgb(233,245,255)','#fff'],
                
            }
        },
        indicator: [
            {
                name: 'FP',
                max: 100
            },
            {
                name: 'FCP',
                max: 100
            },
            {
                name: 'LCP',
                max: 100
            },
            {
                name: 'FID',
                max: 100
            },
            {
                name: 'CLS',
                max: 100
            }
        ]
    },
    series: [{
      name:'资源性能',
        type: 'radar',
        symbolSize: 0,
        areaStyle: {
            normal: {
                width: 0,
                opacity: 0.4,
            },
        },
         lineStyle: {
                    normal: {
                        width:0,
                    },
                },
        data: [
          {
            itemStyle: {
                normal: {
                    color: '#0291FF',
                },
            },
            value: this.arr
        }]
    }]
};
    myChart.setOption(option);
    }
    }
}
</script>
<style lang="scss">
</style>
